import React, { useState, useMemo } from "react";

interface User {
  name: string;
  age: number;
}


export default function Memo() {

  const [user, setUser] = useState<User>({
    name: 'pipi',
    age: 18,
  })

  const [input, setInput] = useState<string>('')

  return (
    <>
      <h1>useMemo</h1>
      <input type="text" value={input} onChange={e => setInput(e.target.value)} />
      <button onClick={() => setUser({...user, age: Number(input)})}>修改age</button>
      <hr />
      <Child user={user} />
    </>
  )
}
// React.memo props 改变时才会重新渲染
const Child = React.memo((props: { user: User }) => {
  console.log('子组件render');

  return (
    <>
      <h1>child</h1>
      <div>{props.user.name}</div>
      <div>{props.user.age}</div>
    </>
  )
})